<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<!-- 表单上传文件 -->

<form method="POST" action="/WebPageServer/register" enctype="multipart/form-data">

    <label>

        用户名：

        <input type="text" name="userName" placeholder="必填">

    </label>


    <label>

        密码：

        <input type="password" name="password" placeholder="必填">

    </label>


    <label>

        再次输入密码：

        <input type="password" name="password2" placeholder="必填">

    </label>


    <label id="img-label">头像：


        <!-- 监听文件选择事件 -->

        <input name="userImg" type="file" onchange="selectFile(event)">

        <input type="text" placeholder="上传图片">

    </label>


    <button onclick="ajaxSubmit(event)">注册</button>

</form>

<script>


    function submit(event) {

        event.preventDefault();  //阻止默认行为


        let form = event.target.form; //获取表单对象


        //通过属性选择器（基于name属性） 分别获取用户名、密码、密码2、文件

        var userName = document.querySelector("input[name='userName']").value;

        var password = document.querySelector("input[name='password']").value;

        var password2 = document.querySelector("input[name='password2']").value;

        var file = document.querySelector("input[name='userImg']").file[0]; //获取文件


        let res = check(userName, password, password2)


        if (res) {

            form.check;

        } else {

            alert("请检查信息")

        }


    }


    //检查用户名长度是否小于等于10,

    //检查密码1和密码2是否相等

    // 符合要求返回true,否则反回false

    function check(userName, password, password2) {

        if (userName.length <= 10) {

            return false;

        }


        if (password == password2) {

            return false;

        }


        return true;

    }


    function selectFile(event) {

        let file = event.target.file[0];

        event.target.nextElementSibling.value = file.name;

    }


</script>
</body>

</html>